<template>
  <div style="background:white;margin-top:10px;border-radius:10px;height:270px;">
    <el-row>
      <div>
        <el-col :span="24">
          <div class="projectIndexTitle">
            <div class="projectIndexSquare"></div>
            <span class="projectIndexInfo">临期任务：</span>
            <el-radio-group v-model="redioGroup" :max="1" size="mini" @change="tabclik">
              <el-radio-button class="indexRadioButton" label="threeDays">三天内</el-radio-button>
              <el-radio-button class="indexRadioButton" label="oneWeek">一周内</el-radio-button>
            </el-radio-group>
          </div>
          <!-- <el-tabs style="height:40px;margin-left:10px" @tab-click="tabclik" value="threeDays">
            <el-tab-pane label="3天内超期任务" name="threeDays"></el-tab-pane>
            <el-tab-pane label="一周内超期任务" name="oneWeek"></el-tab-pane>
          </el-tabs> -->
        </el-col>
        <!-- <el-col :span="7" :offset="2">
          <el-select placeholder="请选择" v-model="projectOrMilepost">
            <el-option v-for=" item in selections" :label="item.label" :value="item.value" :key="item.value">
            </el-option>
          </el-select>
        </el-col> -->
        <!-- <el-col :span="4" :offset="1">
          <el-button type="primary" size="small" style="margin-top:3px">导出</el-button>
        </el-col> -->
      </div>
    </el-row>
    <!-- <el-row>
      <div style="height:1rem"></div>
    </el-row> -->
    <el-row style="padding:4px 20px 0 20px">
      <el-table class="tl-table" ref="mainTable" height="210" :resizable-refs="['search', 'toolbar', 'selector', 'pager']" :data="datas" row-key="id" @row-click="clicktaskrow" border fit v-loading="tableLoading">
        <!-- <el-table-column type="selection" min-width="25%"></el-table-column> -->
        <el-table-column prop="dispdeptcommoncode1" label="所属部门" min-width="20%" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="projectname" label="项目名称" min-width="20%" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="dispprojectlevel" label="项目级别" min-width="20%" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="taskname" label="任务名称" min-width="20%" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="responsible" label="任务负责人" min-width="25%" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="daynum" label="临期时间(天)" min-width="25%" :show-overflow-tooltip="true" align="center"></el-table-column>
        <el-table-column prop="planenddate" label="计划完成日期" min-width="25%" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">{{ scope.row.planenddate | toDateTime('yyyy-MM-dd') }}</template>
        </el-table-column>
      </el-table>
    </el-row>
    <tl-edit ref="editForm"></tl-edit>
  </div>
</template>

<script>
import { getAction } from '@tapui/utils/http'
import { validateNull } from '@tapui/utils/validate'
import tlEdit from '@/views/gpm/gpmProjectTask/editIndex'
// 即将超期的任务
export default {
  name: 'taskSoonOverdue',
   components: { tlEdit },
  data() {
    return {
      timeColName: 'oneWeek',
      projectOrMilepost: '',
      datas: [],
      dateValue: new Date(),
      mySelection: '',
      dataPermissionFlagForRecentlyProject: 'org',
      tableLoading: false,
      redioGroup: 'threeDays',
      url: {
        querySoonOverdueTask: '/sd/sdIndex/querySoonOverdueTask'
      }
    }
  },
  computed: {},
  methods: {
    // 点击打开任务详情页
    clicktaskrow(row, column, event) {
      let id = row.id
      this.openviewform('editForm', id)
    },
    /** 打开编辑对话框 */
    openviewform(editForm, id) {
      this.$refs[editForm].id = id
      this.$refs[editForm].isAdd = false
      this.$refs[editForm].visible = true
      this.$refs[editForm].disableEditSubmit = true
    },
    // /** 刷新,页号不变*/
    // doRefresh() {
    //   this.loadData({})
    // },
    tabclik(label) {
      // 清空现有数据
      this.datas = []
      var param = {}
      // 根据tab不同传递不同天数
      if (label === 'threeDays') {
        param = {
          dataPermissionFlag: this.dataPermissionFlagForRecentlyProject,
          overdueDays: 3,
          pageSize: 5,
          sidx: 'PLANENDDATE',
          sord: 'asc'
        }
      } else if (label === 'oneWeek') {
        param = {
          dataPermissionFlag: this.dataPermissionFlagForRecentlyProject,
          overdueDays: 7,
          pageSize: 5,
          sidx: 'PLANENDDATE',
          sord: 'asc'
        }
      }
      this.loadData(param)
    },
    loadData(param) {
      // loading 加载
      this.tableLoading = true
      this.dataPermissionFlagForRecentlyProject = param.dataPermissionFlag
      var paramDefault = {
        dataPermissionFlag: this.dataPermissionFlagForRecentlyProject,
        overdueDays: 3,
        pageSize: 5,
        sidx: 'PLANENDDATE',
        sord: 'asc'
      }
      Object.assign(paramDefault, param)
      getAction(this.url.querySoonOverdueTask, paramDefault).then((res) => {
        if (res.success) {
          this.datas = res.result
          // 重载数据，防止表格高度变矮（element自带的BUG）
          this.$nextTick(() => {
            this.$refs.mainTable.doLayout()
          })
        } else {
          this.$tap.alert(res.message, 'warning')
        }
        this.tableLoading = false
      })
    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.parentCenter {
  display: flex;

  /* background: #cecece; */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.el-pagination__total {
  margin: 0px;
}
.pagebar {
  font-size: 14px;
}
.child {
  background: #000;
  width: 10%;
  height: 10%;
}
/** 表格上边、左边的线 */
.el-table--border,
.el-table--group {
  border: none;
}
/**  表格下边的线 */
.el-table--border::before,
.el-table--group::before {
  width: 0;
}
/**  表格右边的线 */
.el-table--border::after,
.el-table--group::after {
  height: 0;
}
/** 表格样式相关 */
.tl-table {
  /** “暂无数据”居中显示 */
  /deep/ .el-table__empty-block {
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  /deep/ .el-table__empty-text {
    text-align: center;
  }
  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; // 横向滚动条
    height: 7px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(144, 147, 153, 0.3);
  }
  // 控制边框
  /deep/ .gutter {
    display: none !important;
  }
  /deep/ .el-table__header-wrapper .el-table__header {
    table-layout: auto !important;
  }
  /deep/ .el-table__body-wrapper .el-table__body {
    table-layout: auto !important;
  }
}
</style>
